import React, {memo, useState, useTransition} from 'react';
import nameArray from "./nameArray";

/**
 * useTransition:
 * 官方解释：返回一个状态值表示过渡任务的等待状态, 以及一个启动该过渡任务的函数
 * 它其实是在告诉 react 对于某部分任务的更新优先级较低，可以稍后进行更新
 */
const App = memo(() => {

  const [names, setNames] = useState(nameArray);
  //pending: 布尔类型, 悬而未决的, 当数据没有最终的结果时: pending = true;
  //startTransition: 函数, 把需要延迟更新(优先级低)的操作, 通过回调函数的方式传入startTransition
  const [ pending, startTransition] = useTransition();

  //问题：当nameArray数据量过大时，用户输入会产生卡顿
  const inputChangeHandle = (event) => {
    //把需要延迟更新(优先级低)的操作, 通过回调函数的方式传入 startTransition, 它就会等到主要内容更新完成后，再执行其中的代码
    startTransition(() => {
      const search = event.target.value;
      const filterNames = nameArray.filter(item => item.includes(search))
      setNames(filterNames);
    })
  }

  return (
      <div>
        <input type="text" onInput={e => inputChangeHandle(e)}/>
        <h2>用户列表</h2>
        {
          pending ? <span>loading...</span> :
              <ul>
                {
                  names.map((name, index) => (
                      <li key={index}>{name}</li>
                  ))
                }
              </ul>
        }
      </div>
  );
});

export default App;
